<template>
  <div style="height: 100%;background:url(../assets/login2.png)">
    <div class="loginContainer">
    <div class="login-img">
      <!-- <img src="../assets/143217104131987003.png"> -->
    </div>
    <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" label-width="0px" class="demo-ruleForm login-container">
      <!-- <h2 class="title">东源公共信息平台</h2> -->
      <h2 class="title">{{platName}}</h2>
      <!-- <router-link to="/account/register" class="account-right">注册</router-link> -->
      <el-form-item prop="account">
        <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input style="width:230px" v-model="ruleForm2.code" auto-complete="off" placeholder="验证码">
        </el-input> <img :src="codeImg" @click="changeCodeImg()" style="vertical-align:middle;cursor: pointer;">
      </el-form-item>
      <el-form-item v-if="adminbool==1">
        <el-input v-model="ruleForm2.admincode"  style="width:230px" auto-complete="off" placeholder="手机验证码"></el-input>
        
      <button class="account-pb-bt" @click="codesb" type="button">{{codehtml}}</button>
      </el-form-item>
      <div class="clearfix">
        <el-checkbox v-model="checked" class="remember ">记住密码</el-checkbox>
        <router-link to="/account/ft_password" class="flont-r">忘记密码</router-link>
      </div>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" @keyup.enter.native="handleSubmit2()"
          :loading="logining">登录</el-button>
          
        <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
      </el-form-item>
      <!-- {{codeImg}} -->
    </el-form>
    <div class="footer">
      <div class="" style="text-align: center;color: #fff">目前支持谷歌、火狐等主流浏览器(360请在极速模式下使用)</div>
      <div style="text-align: center;"><a href="http://beian.miit.gov.cn" style="color: #fff;">{{platIcp}}</a></div>
    </div>
  </div>
  </div>
</template>

<script>
  import {
    requestLogin,
    logout,
    query,
    userinfo,
    menu_tree,
    get_random_code,
    check_random_code,
    login_message_query,
    send_login_pass_code
  } from "../api/api";

  import md5 from 'js-md5';
  //import NProgress from 'nprogress'
  export default {
    data() {
      return {
        phone:'',
        codes: 300,
        platIcp:'',//备案
        platName:'',//平台名称
        codehtml: "获取验证码",
        adminbool: 0,
        codeImg: '',
        logining: false,
        ruleForm2: {
          account: "",
          checkPass: "",
          code: '',
          admincode: ''
        },
        rules2: {
          account: [{
              required: true,
              message: "请输入账号",
              trigger: "blur"
            }
            //{ validator: validaePass }
          ],
          checkPass: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            }
            //{ validator: validaePass2 }
          ],
          code: [{
              required: true,
              message: "请输入验证码",
              trigger: "blur"
            }
            //{ validator: validaePass2 }
          ]
        },
        checked: true
      };
    },
    created: function () {
      console.log(this.urlapi)
      // this.codeImg=this.urlapi+"/api/auth/get_random_code";
      // this.codeImg = " http://192.168.0.110:9100/api/auth/get_random_code";

      var _this = this;
      document.onkeydown = function (e) {
        let key = window.event.keyCode;
        if (key == 13) {
          _this.handleSubmit2();
        }
      };
    },
    methods: {
      codesb() {
        var params = {
          phone: this.phone
        };
        if (this.codes < 300) {
          console.log(this.codes)
          return false;
        }


        send_login_pass_code(params).then(data => {
          //NProgress.done();
          let {
            code,
            user,
            message
          } = data;
          if (code !== 0) {
            this.$message({
              message: message,
              type: "error"
            });
          } else {
            
            this.codehtml = this.codes-- + "s";
            let t = setInterval(() => {
              this.codes--;
              this.codehtml = this.codes + "s";
              if (this.codes == 0) {
                clearInterval(t);
                this.codes = 300;
                this.codehtml = '获取验证码';
              }
            }, 1000);
            this.$message({
              message: '验证码发送成功，请注意查收',
              type: "success"
            });
          }
        });
      },
      changeCodeImg: function () {

        console.log(this.urlapi)
        var num = Math.ceil(Math.random() * 1000); //生成一个随机数（防止缓存）
        this.codeImg = this.urlapi + "/api/auth/get_random_code?" + num;

        // this.codeImg = " http://192.168.0.110:9100/api/auth/get_random_code?" + num;
      },
      handleReset2() {
        this.$refs.ruleForm2.resetFields();
      },
      userinfo() {

      },
      handleSubmit2(ev) {
        console.log(md5(this.ruleForm2.checkPass))
        if (this.checked) {
          localStorage.setItem('account', this.ruleForm2.account);
          localStorage.setItem('checkPass', this.ruleForm2.checkPass);
          localStorage.setItem('loginchecked', this.checked);
        } else {
          localStorage.clear();
        }
        var _this = this;
        this.$refs.ruleForm2.validate(valid => {
          if (valid) {
            // let para = {
            //   code: this.ruleForm2.code
            // }
            // check_random_code(para).then(e => {
            //   console.log(e)
            //   this.logining = false;
            //   //NProgress.done();
            //   let {
            //     code,
            //     data,
            //     message
            //   } = e;
            //   console.log(code, data, message);
            //   if (code !== 0) {
            //     this.$message({
            //       message: message,
            //       type: "error"
            //     });
            //     // this.changeCodeImg();
            //   } else {
                var loginParams = {
                  username: this.ruleForm2.account,
                  password: this.ruleForm2.checkPass,
                  verifyCode: this.ruleForm2.admincode,
                  code: this.ruleForm2.code
                };
                requestLogin(loginParams).then(e => {
                  this.logining = false;
                  //NProgress.done();
                  let {
                    code,
                    data,
                    message
                  } = e;
                  console.log(code, data, message);
                  if (code == 1009||code==1018) {

                    // this.adminbool = 1;
                    this.$message({
                      message: message,
                      type: "warning"
                    });

                    this.changeCodeImg();
                    return false;
                  }
                  if (code == 1019) {
                    
                  this.phone=data;
                    this.adminbool = 1;
                    this.$message({
                      message: '请输入手机验证码',
                      type: "warning"
                    });

                    // this.changeCodeImg();
                    // this.ruleForm2.code = '';
                    return false;
                  }
                  if (code !== 0) {
                    this.$message({
                      message: message,
                      type: "error"
                    });

                  } else {
                    let params = {
                      token: data.token
                    };
                    localStorage.setItem("key", JSON.stringify(data.token));//token
                    this.menubt = ' ';
                    this.menubt = JSON.stringify(data.paths);
                    localStorage.setItem('menubt', JSON.stringify(data.paths));
                    this.setCookie('key', JSON.stringify(data.token));
                    this.$router.push({
                      path: "/loading"
                    });
                  }
                });



            //   }
            // });
            // return false

          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },
    mounted() {
      var user = JSON.parse(localStorage.getItem("key"));
      let _this = this;
      sessionStorage.clear();
      this.delCookie('key');
      // document.write("js获取上(前)一页url"+document.referrer);
      console.log(document.referrer)
      login_message_query().then((res) => {
       console.log(res)
       this.platIcp = res.data[2].remark;
       this.platName = res.data[0].remark;
     })
      if (user) {
        userinfo(user).then(e => {

          let {
            code,
            data,
            message
          } = e;
          console.log(code, data, message);
          if (code !== 0) {
            localStorage.removeItem('key');
            localStorage.removeItem('menu');
            localStorage.removeItem('menubt');
            console.log(this.menubt)
            this.menubt = '';
            sessionStorage.clear();
            console.log(user);
          } else if (code == 0) {
            console.log(12);

            // sessionStorage.setItem("user", JSON.stringify(data));
            // return false;
            this.$router.push({
                      path: "/home_page"
                    });
          }
        });

      } else {}
      this.changeCodeImg();
      // console.log(this.urlapi)
      this.ruleForm2.account = localStorage.getItem('account');
      this.ruleForm2.checkPass = localStorage.getItem('checkPass');
      // this.checked=localStorage.getItem('loginchecked');
      console.log(this.checked)

    }
  };
</script>

<style lang="scss" scoped>
  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 0 auto 90px;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    .title {
      margin: 0px auto 30px auto;
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      color: #505458;
    }

    .remember {
      margin: 0px 0px 35px 0px;
    }
  }

  .login-img {
    position: relative;
    z-index: 1000;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-top: 105px;
    margin-left: 13%;
    margin-right: 72px;
    width: 550px;
    height: 546px;
    background: url(../assets/login2.png) no-repeat 0 0;
    background-size: 100% 100%;
  }
  .login-img  img{

    width: 100%;
  }
  .login-container{
    position: absolute;
    top: 14%;
    right: 12%;
    z-index: 1000;
    /* width: 490px; */
  }
  .loginContainer{
    min-width: 1000px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: 14px;
    color: #303133;
    width: 100%;
    min-height: 100%;
    background: url(../assets/1564207747.png) no-repeat 0 0;
    // background-size: 1920px 1080px;
    background-size: cover;
  }
  .footer{
    position: absolute;
    bottom: 20px;
    width: 100%;
  }
</style>